

<template>
  <div v-if="flag">
      <h2>Find  - Find -  发现  </h2>
      <h2>Vuex 的入门学习  </h2>
      <h2 @click="numAdd">num == {{ num  }}</h2>
      <hr>
      <h2 @click="count1++" >count == {{ count1 }} - {{ count2 }} - {{ count3  }} - {{ count4  }} - {{ count5 }}</h2>
      <h2>city = {{ city1  }}- {{ city  }}</h2>
      <h2>word = {{ word1  }} - {{ word  }}</h2>
      <h2>number = {{ data1.number  }} - {{ data.number  }}</h2>
      <h2>test = {{ data1.test }} - {{ data.test }}</h2>
      <h2>msg = {{ msg }}</h2>
      <h2>newCount ={{ newCount }}</h2>
      <h2>newword == {{ newword }}</h2>
      <hr>
      <p>
        <button @click="countAdd" >count+1</button>
        <button @click="countDesc" >count-1</button>
        <button @click="todochange(50)" >changeCount</button>

      </p>
      <p>
        <button @click="changeCity('美丽的大冶')"   >想去 大冶  旅游 </button>
      </p>
      <p>
        <button @click="changeWord('WH2309  daydayup')">WH2309  daydayup </button>
      </p>
      <p>
        <button @click="changeFlag(!flag1)"  >切换flag </button>
      </p>
      <p>
        <button @click="changeDataNumber(-30)">修改data-number</button>
        <button @click="changeDataTest('测试test是否成功')">修改data-test</button>
        <button @click="changeMsg('I am very OKOKOK?')">修改Msg </button>

      </p>
  </div>
</template>

<script>
import store from '../store'
import { mapGetters, mapMutations, mapState } from 'vuex'
import { COUNTADD, COUNTDESC } from '../store/type'
export default {
  data(){
    return {
      num:999,
      count1:this.$store.state.count
    }
  },
  computed:{
    count2(){
      return this.$store.state.count
    },
    city1(){
      return this.$store.state.city
    },
    word1(){
      return this.$store.state.word;
    },
    flag1(){
      return this.$store.state.flag
    },
    data1(){
      return this.$store.state.data;
    },
    ...mapState({  // 映射了state
      count3:state=>state.count,
      count4:'count',   // 传字符串参数 'count' 等同于 `state => state.count`
      count5(state){
        return state.count
      }
    }),
    ...mapState([
      'count',  // 映射 this.count 为 store.state.count
      'city',
      'word',
      'flag',
      'data',
      'msg'
    ]),
    ...mapGetters([
      'newCount',
      'newword'
    ])
  },
  methods:{
    numAdd(){
      this.num++;
    },
    // countAdd(){
    //   this.$store.commit(COUNTADD)
    // },
    // countDesc(){
    //   store.commit(COUNTDESC)
    // },
    // todochange(){
    //   this.$store.commit('changeCount',20)
    // },
    // changeCity(){
    //   this.$store.commit('changeCity','美丽的大冶')
    // },
    // changeWord(word){
    //   store.commit('changeWord',word)
    // },
    // changeFlag(flag){
    //   store.commit('changeFlag',flag)
    // },
    // changeDataNumber(n){
    //   store.commit('changeDataNumber',n)
    // },
    // changeDataTest(test){
    //   this.$store.commit('changeDataTest',test)
    // },
    ...mapMutations({
      countAdd:COUNTADD,   // this.countAdd = this.$store.commit(COUNTADD)
      countDesc:COUNTDESC,  // this.countDesc = store.commit(COUNTDESC)
      todochange:'changeCount' // this.todochange = this.$store.commit('changeCount',20)
    }),
    ...mapMutations([
      'changeCity' ,  // this.changeCity = this.$store.commit('changeCity')
      'changeWord',
      'changeFlag',
      'changeDataNumber',
      'changeDataTest',
      'changeMsg'
    ])
  },
  mounted(){
    console.log(this.$store)
  }
}
</script>


